<template>
    <div class="out-style">
        <Modal v-model="isShow" :title=reportTitle :closable="false" :mask-closable="false" class="global-modal-line">
            <template>
                <Spin size="large" fix v-if="spinShow"></Spin>
                <Form :model="formItem" :label-width="110">
                    <FormItem label="项目名称：" prop="project_name_id">
                       <Select v-model="formItem.project_name_id">
                            <Option v-for="(item,index) in projectList" :value="item.id" :key="index">
                                {{item.project_name }}
                            </Option>
                        </Select>
                    </FormItem>
                    <FormItem label="举报问题：" prop="report_question">
                        <Select v-model="formItem.objectList" multiple >
                            <Option v-for="item in questionList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="举报人姓名：">
                        <Input v-model="formItem.report_name" placeholder="请输入姓名"></Input>
                    </FormItem>
                    <FormItem label="举报人身份证号：">
                        <Input v-model="formItem.id_card" placeholder="请输入身份证号"></Input>
                    </FormItem>
                    <FormItem label="举报人手机号：">
                        <Input v-model="formItem.phone" placeholder="请输入手机号"></Input>
                    </FormItem>
                    <FormItem label="举报内容：">
                        <Input v-model="formItem.report_content" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
                               placeholder="请输入举报内容"></Input>
                    </FormItem>
                </Form>
            </template>
            <div slot="footer">
                <Button type="text" @click="cancelAction()">取消</Button>
                <Button type="success" @click="handleSubmit()">保存</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import {
  getProjectList,
  getProjectReportById
} from '@/api/manager-report'
export default {
  name: 'ProjectReport',
  props: {
    type: {
      type: String,
      default: () => {
        return 'add'
      }
    },
    isShow: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    reportTitle: {
      type: String,
      default: () => {
        return '添加项目举报'
      }
    },
    id: {
      type: String,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      spinShow: false,
      formItem: {
        id: '',
        project_name_id: '',
        report_question: '',
        report_name: '',
        id_card: '',
        phone: '',
        report_content: '',
        objectList: []
      },
      projectList: [],
      questionList: [
        {
          value: '转包和违法分包',
          label: '转包和违法分包'
        },
        {
          value: '违规承揽工程',
          label: '违规承揽工程'
        },
        {
          value: '建筑用料不符合标准',
          label: '建筑用料不符合标准'
        },
        {
          value: '施工手续不全',
          label: '施工手续不全'
        },
        {
          value: '公示数据不实',
          label: '公示数据不实'
        },
        {
          value: '围标串标',
          label: '围标串标'
        },
        {
          value: '未批先建',
          label: '未批先建'
        },
        {
          value: '其他问题',
          label: '其他问题'
        }
      ]
    }
  },
  methods: {
    init () {
      getProjectList().then(ret => {
        let param = ret.data
        if (param.errcode === 1001) {
          this.projectList = param.data.list
        } else {
          this.$Message.error('获取信息失败')
        }
      })
    },
    cancelAction () {
      this.$emit('cancel')
    },
    handleSubmit (formItem) {
      this.$emit('results', this.formItem)
    },
    useIdByInfo () {
      let param = {
        id: this.id
      }
      this.spinShow = true
      getProjectReportById(param).then(ret => {
        this.spinShow = false
        if (ret.data.errcode === 1001) {
          this.formItem.id = ret.data.data[0].id
          this.formItem.project_name_id = ret.data.data[0].project_name_id
          this.formItem.objectList = ret.data.data[0].report_question.split(',')
          this.formItem.report_name = ret.data.data[0].report_name
          this.formItem.phone = ret.data.data[0].phone
          this.formItem.id_card = ret.data.data[0].id_card
          this.formItem.report_content = ret.data.data[0].report_content
        } else {
          this.$Message.error('获取数据失败')
        }
      })
    }
  },
  mounted () {
    this.init()
  },
  watch: {
    isShow (data) {
      if (this.isShow) {
        if (this.type === 'edit') {
          this.useIdByInfo()
        }
      } else {
        this.formItem = {
          report_question: '',
          report_name: '',
          id_card: '',
          phone: '',
          report_content: ''
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
